<!doctype html>

<html lang="en" data-bs-theme="light">
  <head>
    <meta charset="utf-8">
    <title>{{   title   }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
    <link rel="manifest" href="/images/favicon/site.webmanifest">
    <link rel="mask-icon" href="/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="/images/favicon/favicon.ico">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-config" content="/images/favicon/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" type="text/css">

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/dart.min.js"></script>
    <script>hljs.highlightAll();</script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />

    <link rel="stylesheet" href="/styles/docs_page_layout.css">
    <link rel="stylesheet" href="/styles/docs_page_layout_light.css">
    <link rel="stylesheet" href="/styles/docs_page_layout_dark.css">
  </head>

  <body>
    <nav class="navbar navbar-expand-lg">
      <div class="container">
        <a class="navbar-brand" href="/"><img src="/images/branding/logo.png" height="32"><span class="name">{{  package.title  }}</span></a>

        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#drawerNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mb-lg-0 ms-auto align-items-center">
            {% if package.is_on_pub %}
            <li class="nav-item">
              <a class="nav-link" href="https://pub.dev/documentation/{{  package.name  }}/latest/" target="_blank">API Docs</a>
            </li>
            {% endif %}

            {% if package.github != null %}
            <li class="nav-item">
              <a href="{{  package.github.url  }}" target="_blank"><span class="fa fa-brands fa-github"></span></a>
            </li>
            {% endif %}

            {% if package.discord != null %}
            <li class="nav-item">
              <a href="{{  package.discord  }}" target="_blank"><span class="fa fa-brands fa-discord"></span></a>
            </li>
            {% endif %}

            {% if package.sponsorship != null %}
            <li class="nav-item">
              <a class="nav-link" href="{{  package.sponsorship  }}" target="_blank"><span class="fa fa-dollar-sign"></span></a>
            </li>
            {% endif %}

            <li class="nav-item">
              <span id="brightness-button" onclick="toggleBrightness()" class="fa fa-moon"></span>
            </li>
          </ul>
        </div>

        <!-- Search Field -->
        <!-- Docs: https://docsearch.algolia.com/docs/docsearch-v3/ -->
        <!--
        <div id="docsearch"></div>
        -->

      </div>
    </nav>

    <!-- Offscreen drawer that shows navigation on mobile -->
    <div id="drawerNav" class="drawer-nav offcanvas offcanvas-start">
     {{  components.navMain()  }}

      <a type="button" class="exit" data-bs-toggle="offcanvas" data-bs-target="#drawerNav">
        <span class="fa fa-xmark"></span>
      </a>
    </div>

    <div class="container">
      <div class="row">
        <!-- Main nav menu on left side of screen on desktop -->
        <div class="col col-2 d-none d-lg-block">
         {{  components.navMain()  }}
        </div>

        <!-- Page/article content -->
        <main class="page-content col-12 col-lg-10 col-xl-8">
          <header>
            <h1>{{  title  }}</h1>
          </header>

         {{   content   }}
        </main>

        <!-- Table of contents for the page/article on desktop -->
        <nav class="table-of-contents col col-2 d-none d-xl-block">
          {% if tableOfContents is defined and tableOfContents.linkCountBeyondLevel(0) > 1 %}
          <div class="table-of-contents">
           {{  tableOfContents.renderHtmlList(startingLevel = 1)  }}
          </div>
          {% endif %}
        </nav>
      </div>
    </div>

    <footer>
      <p class="built-with">Built with <a href="https://staticshock.io">Static Shock</a></p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>

    <script>
      // Note: the following code must appear at the root of the script
      // - not in an "onload" function - because we need this code to
      // run before anything is painted. Otherwise we get a flicker from
      // light mode to dark mode on load.
      var brightness = localStorage.getItem('brightness');
      if (brightness === "light" || brightness === null) {
        goToLightMode();
      } else {
        goToDarkMode();
      }

      // Configure the global text search input.
      //docsearch({
      //  container: '#docsearch',
      //  appId: '',
      //  indexName: '',
      //  apiKey: '',
      //});

      function toggleBrightness() {
        console.log("Toggling brightness");
        var html = document.getElementsByTagName("html")[0];
        if (html.getAttribute("data-bs-theme") == "light") {
          goToDarkMode();
        } else {
          goToLightMode();
        }
      }

      function goToLightMode() {
        var html = document.getElementsByTagName("html")[0];
        html.setAttribute("data-bs-theme", "light");

        // For Algolia Docsearch bar theme
        html.setAttribute("data-theme", "light");

        var button = document.getElementById("brightness-button");
        button.classList.remove("fa-sun");
        button.classList.add("fa-moon");

        localStorage.setItem('brightness', 'light');
      }

      function goToDarkMode() {
        var html = document.getElementsByTagName("html")[0];
        html.setAttribute("data-bs-theme", "dark");

        // For Algolia Docsearch bar theme
        html.setAttribute("data-theme", "dark");

        var button = document.getElementById("brightness-button");
        button.classList.remove("fa-moon");
        button.classList.add("fa-sun");

        localStorage.setItem('brightness', 'dark');
      }
    </script>
  </body>
</html>